<template>
  <div class="container">
    <div class="cut"></div>
    <div class="scroll_card">
      <el-carousel :interval="4000" type="card" height="300px">
        <el-carousel-item v-for="item in imgURL" :key="item">
          <h3 text="2xl" justify="center">
            <img class="lb-img" :src="item" />
          </h3>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="cut"></div>
    <div class="module">
      <h3>客户细节分析</h3>
      <div class="bg-W">
        <div class="cut"></div>
        <div class="pie_chart">
          <div
            class="echart"
            id="mychart"
            :style="{ float: 'left', width: '100%', height: '100%' }"
          ></div>
        </div>
      </div>
    </div>
    <div class="cut"></div>
  </div>
</template>

<script>
import "../../css/jquery.bxslider.css";
import "../../css/font-awesome.min.css";
import "../../css/bootstrap.min.css";
import "../../css/animate.css";
import "../../css/style.css";

import * as echarts from "echarts";
import { TooltipComponent, LegendComponent } from "echarts/components";
import { PieChart } from "echarts/charts";
import { LabelLayout } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
echarts.use([
  TooltipComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout,
]);
var myChart;
export default {
  data() {
    return {
      imgURL: [
        require("../../img/lb01.png"),
        require("../../img/lb02.png"),
        require("../../img/lb03.png"),
        require("../../img/lb04.png"),
        require("../../img/lb05.png"),
      ],
    };
  },
  mounted() {
    console.log("mounted");
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      let option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "客户分析图",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "20",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 71, name: "有风险客户数" },
              { value: 928, name: "安全客户数" },
            ],
          },
        ],
      };

      if (myChart != null) {
        // 如果存在，就销毁。
        myChart.dispose();
      }
      myChart = echarts.init(document.getElementById("mychart"));
      // 图标初始化
      myChart.setOption(option, true); // 渲染页面
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>

<style>
.lb-img {
  width: 100%;
  height: 100%;
  background: #f2f2f2;
  display: flex;
  justify-content: center;
  align-items: center;
}
.scroll_card {
  padding-top: 20px;
  background-color: #fff;
}
.module {
  padding-top: 5px;
  background-color: #fff;
  border-radius: 10px;
  background-color: #ecf5ff;
}
.bg-W {
  background-color: #fff;
}
.module h3 {
  margin-top: 10px;
  padding: 10px 0;
  color: #409eff;
}
.pie_chart {
  height: 350px;
}
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>